<template>
	<view class="membershipqrcode">
		<!-- 		<view v-for="(item,index) in dataInfo" :key="index">

			{{item}}

		</view> -->

		<view class="background-f borderradius qrcode">
			<view class=" qrcode-img">
				<image :src="base64Image ? base64Image : '../../static/images/qrcode.png'"
					style="height: 100%;width: 100%;">
				</image>
			</view>
			<view class="qrcode-text">
				{{applyUnionName}}
			</view>
			<view class="qrcode-text-hr">

			</view>
			<view class="qrcode-text" style="width: 550rpx;">
				<view class="icon-text">
					<view class="icon-chren">
						<image class="icon-chren-img" src="../../static/images/coderenyuan.png" alt=""></image>
						<text class="icon-chren-text">申请组织员</text>
					</view>
					<view class="icon-chren">
						<image class="icon-chren-img" src="../../static/images/codesaoma.png" alt=""></image>
						<text class="icon-chren-text">扫一扫</text>
					</view>
					<view class="icon-chrens">
						<image class="icon-chren-img" src="../../static/images/codeduoren.png" alt=""></image>
						<text class="icon-chren-text">成为组织员</text>
					</view>
				</view>
			</view>
		</view>
	<!-- 	<view class="share flex borderradius background-f" style="border-radius: 40rpx;">
			<view class="flex1 text-center">
				<image src="../../static/images/pengyouquan.png" mode="" class="img"></image>
				<view class="share-text">
					分享到朋友圈
				</view>
			</view>
			<view class="flex1 text-center">
				<image src="../../static/images/wechat.png" mode="" class="img"></image>
				<view class="share-text">
					分享到微信
				</view>
			</view>
			<view class="flex1 text-center">
				<image src="../../static/images/img.png" mode="" class="img"></image>
				<view class="share-text">
					保存到手机
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		queryMembershipCode
	} from '../../api/work/membershipqrcode';
	import {
		toast
	} from '../../utils/common';
	export default {
		mounted() {
			// 获取设备信息
			const systemInfo = uni.getSystemInfoSync();
			// 检测平台类型
			const platform = systemInfo.platform;
			if (platform == 'ios' || platform == 'android') {
				this.userTopAuth(true, 'UnionCredential').then(res => {
					// this.userTopAuth(true, '(MembersCredential|WorkerMembersCredential)&PhoneNumberCredential').then(res => {
					this.formDataSet(res)
				}).catch(err => {
					this.formDataSet(err)
					// this.$router.back();
				})
			} else {
				// 当前页面用户数据 KEY
				this.userTopAuth(false, 'UnionCredential').then(res => {
					console.log(res);
					this.formDataSet(res)
				}).catch(err => {
					this.$router.back();
				})
			}

		},
		data() {
			return {
				dataInfo: [],
				membershipqrcodeData: null,
				applyUnionName: null,
				base64Image: null,
			}
		},
		methods: {
			formDataSet(form) {
				this.dataInfo.push(form)
				this.membershipqrcodeData = form
				console.log(this.membershipqrcodeData);
				this.getQrMembershipCode()
			},


			getQrMembershipCode() {
				queryMembershipCode(this.membershipqrcodeData.UnionCredential,3).then(res => {
						console.log(res);
						this.applyUnionName = res.applyUnionName
						this.base64Image = res.base64Image
					})
					.catch(err => {
						toast("获取二维码失败")
					})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.icon-text {
		display: flex;
		justify-content: space-around;
		align-items: center;

		.icon-chrens {
			display: inline-block;
			position: relative;

		}

		.icon-chren {
			display: inline-block;
			position: relative;
			padding: 0 auto;
		}

		.icon-chren::before {
			content: '';
			position: absolute;
			right: -113%;
			top: 50%;
			transform: translateY(-50%);
			width: 20rpx;
			height: 30rpx;
			background-image: url('../../static/images/codebackleft.png');
			background-size: 100% 100%;
			// background-size: cover;
			background-repeat: no-repeat;
		}

		.icon-chren-img {
			width: 64rpx;
			height: 64rpx;
			display: flex;
			margin-bottom: 15rpx;
			margin: 0 auto;

		}

		.icon-chren-text {
			width: 150rpx;
			position: absolute;
			bottom: -35rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 12px;
			text-align: center;
		}
	}


	@font-face {
		font-family: '阿里妈妈数黑体';
		src: url('../../static/font/阿里妈妈数黑体.ttf') format('truetype');
		/* 修正为 truetype */
	}

	.titel {
		color: #fff;
		text-align: center;
		letter-spacing: 5rpx;
		padding-top: 60rpx;
	}


	.membershipqrcode {
		width: 100vw;
		height: 100vh;
		position: relative;

		.membershipqrcode-bimg {
			width: 100vw;
			height: 100vh;
		}

		.qrcode {
			position: relative;
			padding: 60rpx 60rpx;
			background-color: transparent;
			background-image: url('../../static/images/codeback.png');
			background-size: 100% 100%;
			width: 90%;
			margin: 0 auto;
			transform: translateY(80rpx);

			.qrcode-img {
				width: 550rpx;
				height: 550rpx;
				display: block;
				margin-bottom: 0;
				margin-top: -25rpx;
				position: relative;
				margin-bottom: -20rpx;
				z-index: -1;

				img {
					width: 400rpx;
					height: 400rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.qrcode-img-data {
					width: 400rpx;
					height: 400rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

			}

			.circle1 {
				width: 24px;
				height: 24px;
				border-radius: 24px;
				background: #F5F5F5;
				position: absolute;
				left: -12px;
			}

			.circle2 {
				width: 24px;
				height: 24px;
				border-radius: 24px;
				background: #F5F5F5;
				position: absolute;
				right: -12px;
			}

			.qrcode-line {
				height: 24rpx;
				border-bottom: 1px dashed;
				padding: 16px -16px;
				margin-bottom: 20px;
				width: 110%;
				transform: translate(-5%);
			}

			.qrcode-text-hr {
				margin-top: 80rpx;

				background-repeat: no-repeat;
				background-size: 100% 100%;
				height: 6rpx;
				background-image: url('../../static/images/xuxian.png');
				margin-bottom: 80rpx;
			}

			.qrcode-text {
				width: 300rpx;
				margin: 0 auto;
				text-align: center;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 30rpx;
				z-index: 2;

			}
		}

		.img {
			width: 48rpx;
			height: 48rpx;
		}

		.share {
			margin: 64rpx auto;
			padding: 52rpx 40rpx;
			margin-top: 120rpx;
			width: calc(92% - 64rpx);
		}

		.share-text {
			margin-top: 20rpx;
			font-size: 20rpx;
			color: rgba(153, 153, 153, 1);
		}
	}
</style>